<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        .red{
            color: red;
        }

        .orangered{
            color: orangered;
        }

        .orange{
            color: orange;
        }

    </style> -->

    <!-- <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style> -->

    <style>
        [ v-cloak ]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- <div id="app">
        {{message}}
    </div> -->

    <!-- <div id="app">
        <ul>
            <li v-for="item in arr2">
                <p>姓名：{{ item.name }}</p>
                <p>年龄：{{ item.age }}</p>
            </li>
        </ul>
    </div> -->

    <!-- <div id="app">
        <h3 v-if="flag">我现在显示了</h3>
    </div> -->

    <!-- <div id="app">
        <h3 v-if="age > 0 && age < 10">小孩儿</h3>
        <h3 v-else-if="age < 19 && age >=10">青少年</h3>
        <h3 v-else>成年</h3>
    </div> -->

    <!-- <div id="app">
        <ul>
            <li v-for="item in num">
                <span v-if="item === 1" class="red">
                    {{ item }}
                </span>

                <span v-else-if="item === 2" class="orangered">
                    {{ item }}
                </span>

                <span v-else-if="item === 3" class="orange">
                    {{ item }}
                </span>

                <span v-else>
                    {{ item }}
                </span>
            </li>
        </ul>
    </div> -->

    <!-- <div id="app">
        <div :class="className">

        </div>
    </div> -->

    <!-- <div id="app">
        <button v-on:click="fn">点我</button>
        <button @click="fn1">点我1</button>
    </div> -->

    <!-- <div id="app">
        <h2>
            {{ message }}
        </h2>
        <button @click="fn">点我</button>
    </div> -->

    <!-- <div id="app">
        <h2>
            {{ message }}
        </h2>
        <button @click="fn(100)">点我</button>
    </div> -->

    <!-- <div id="app">
        <div v-text="h">
            wqs
        </div>

        <div>
            {{ h + 'aaaaaaaa' }}
        </div>
    </div> -->

    <!-- <div id="app">
        <p>
            账号：<input v-model="val" type="text">
        </p>

        <p>
            多选：<input v-model="flag" type="checkbox" name="" id="">
        </p>

        <p>
            文本：<textarea v-model="textarea" name="" id="" cols="30" rows="10"></textarea>
        </p>

        <p>
            <select v-model="sel" name="" id="">
                <option value="aaa">选项1</option>
                <option value="bbb">选项2</option>
                <option value="ccc">选项3</option>
            </select>
        </p>

        <button @click="login">登录</button>
    </div> -->

    <div id="app">
        <h3 v-cloak>
            {{ msg }}
        </h3>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // const info = {
        //     name : "张三"
        // }

        // new Vue({
        //     el : "#app" ,
        //     data : {
        //         message : "数据"
        //     }
        // })

        // new Vue({
        //     el : "#app",
        //     data : {
        //         str : "字符串" ,
        //         arr : [1,2,3,4],
        //         obj : {
        //             name : "张三" ,
        //             age : 20
        //         },
        //         num : 50
        //     }
        // })

        // new Vue({
        //     el : "#app" ,
        //     data : {
        //         str : "字符串" ,
        //         arr : [1,2,3,4],
        //         arr2 : [
        //             {
        //                 name : "张三" ,
        //                 age : 20
        //             },
        //             {
        //                 name : "李四" ,
        //                 age : 30
        //             },
        //             {
        //                 name : "王五" ,
        //                 age : 40
        //             }
        //         ],
        //         obj : {
        //             name : "张三" ,
        //             age : 20
        //         },
        //         num : 50
        //     }
        // })

        // new Vue ({
        //     el : "#app",
        //     data : {
        //         flag : true
        //     }
        // })

        // new Vue({
        //     el : "#app" ,
        //     data : {
        //         flag : false ,
        //         age : 18
        //     }
        // })

        // new Vue ({
        //     el : "#app" ,
        //     data : {
        //         num : 10
        //     }
        // })

        // new Vue ({
        //     el : "#app" ,
        //     data : {
        //         className : 'box'
        //     }
        // })

        // new Vue({
        //     el : "#app" ,
        //     data : {
        //         message : "数据"
        //     },
        //     methods : {
        //         fn() {
        //             console.log(123);
        //         },
        //         fn1() {
        //             console.log(456);
        //         }
        //     }
        // })

        // new Vue ({
        //     el : "#app" ,
        //     data : {
        //         message : "数据"
        //     },
        //     methods : {
        //         fn(){
        //             this.message = "修改message"
        //         }
        //     }
        // })

        // new Vue({
        //     el : "#app" ,
        //     data : {
        //         message : "数据"
        //     },
        //     methods : {
        //         fn( ev ){
        //             console.log( ev );
        //             this.message = "修改message"
        //         }
        //     }
        // })

        // new Vue ({
        //     el : "#app" ,
        //     data : {
        //         message : "数据" ,
        //         h : "<h1>我是标题</h1>"
        //     }
        // })

        // new Vue({
        //     el : "#app" ,
        //     data : {
        //         message : "数据",
        //         val : "1" ,
        //         flag : true ,
        //         textarea : "" ,
        //         sel : ""
        //     },
        //     methods : {
        //         login(){
        //             console.log( this.sel );
        //         }
        //     }
        // })

        new Vue ({
            el : "#app" ,
            data : {
                msg : "我是标题"
            },
            methods : {
                fn(){
                    this.msg = "aaaa",
                    console.log(123);
                }
            }
        })
    </script>
</body>
</html>